<template>
    <div class="credit-table" ref="wrapperRef" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
        <el-table ref="tableRef" :data="displayData" style="width: 100%; max-height: 225px;" :height="225">
            <el-table-column prop="name" label="姓名" min-width="120" />
            <el-table-column prop="sex" label="性别" width="80" />
            <el-table-column prop="nationality" label="国籍" width="150" />
            <el-table-column prop="business" label="业务类型" width="80" />
            <el-table-column prop="credit" label="信用等级" width="80" />
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'

const tableRef = ref()
const wrapperRef = ref()
let scrollContainer: HTMLElement | null = null
let animationFrameId: number
let isPaused = false
const speed = 0.5 // 每帧滚动的像素数，越小越慢
let scrollTop = 0

// 复制一份数据用于循环展示
const displayData = computed(() => {
    return [...tableData, ...tableData]
})

const tableData = [
    { name: '张三', sex: '男', nationality: '中国', business: '旅检', credit: '一般' },
    { name: '李四', sex: '女', nationality: '美国', business: '商检', credit: '重点' },
    { name: '王五', sex: '男', nationality: '日本', business: '快递', credit: '一般' },
    { name: '赵六', sex: '女', nationality: '韩国', business: '旅检', credit: '重点' },
    { name: '小明', sex: '男', nationality: '加拿大', business: '商检', credit: '一般' },
    { name: 'Tom', sex: '男', nationality: '英国', business: '快递', credit: '重点' },
    { name: 'Lily', sex: '女', nationality: '澳大利亚', business: '旅检', credit: '一般' },
    { name: 'John', sex: '男', nationality: '新加坡', business: '商检', credit: '重点' },
    { name: '阿花', sex: '女', nationality: '马来西亚', business: '快递', credit: '一般' },
    { name: '小强', sex: '男', nationality: '中国', business: '旅检', credit: '重点' },
]

onMounted(() => {
    setTimeout(() => {
        scrollContainer = wrapperRef.value?.querySelector('.el-scrollbar__wrap') || null
        if (scrollContainer) {
            // 数据不足不滚动
            if (scrollContainer.scrollHeight <= scrollContainer.clientHeight * 2) {
                return
            }
            startScroll()
        }
    }, 0)
})

onBeforeUnmount(() => {
    cancelAnimationFrame(animationFrameId)
})

function startScroll() {
    if (!scrollContainer) return

    const maxScroll = scrollContainer.scrollHeight / 2 // 因为我们复制了一份数据，所以最大滚动到一半

    function scrollStep() {
        if (!isPaused && scrollContainer) {
            scrollTop += speed
            
            // 当滚动到复制的数据部分时，无缝切换回原始数据
            if (scrollTop >= maxScroll) {
                scrollTop = 0
                tableRef.value.setScrollTop(0)
            } else {
                tableRef.value.setScrollTop(scrollTop)
            }
        }
        animationFrameId = requestAnimationFrame(scrollStep)
    }
    animationFrameId = requestAnimationFrame(scrollStep)
}

function pauseScroll() {
    isPaused = true
}

function resumeScroll() {
    // 恢复时检查是否需要重置位置
    if (scrollTop >= (scrollContainer?.scrollHeight || 0) / 2) {
        scrollTop = 0
        tableRef.value.setScrollTop(0)
    }
    isPaused = false
}
</script>

<style scoped lang="less">
.credit-table {
    overflow: hidden;
}

.credit-table .el-table {
    --el-table-header-bg-color: #bedff9;
    --el-table-tr-bg-color: #cae3fc;
    --el-table-header-text-color: #3E5971;
    --el-table-text-color: #4E718F;
    cursor: pointer;
}
</style>